<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>示例 | lovewhoilove 的小站</title><meta name="author" content="lovewhoilove"><meta name="copyright" content="lovewhoilove"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="原文链接及内容原文链接：https:&#x2F;&#x2F;openlayers.org&#x2F;en&#x2F;latest&#x2F;examples&#x2F;                                                                  Accessible Map                         无障碍地图                         accessible.">
<meta property="og:type" content="website">
<meta property="og:title" content="示例">
<meta property="og:url" content="https://lovewhoilove.gitee.io/examples/">
<meta property="og:site_name" content="lovewhoilove 的小站">
<meta property="og:description" content="原文链接及内容原文链接：https:&#x2F;&#x2F;openlayers.org&#x2F;en&#x2F;latest&#x2F;examples&#x2F;                                                                  Accessible Map                         无障碍地图                         accessible.">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://lovewhoilove.gitee.io/img/avatar.png">
<meta property="article:published_time" content="2024-03-13T00:42:09.513Z">
<meta property="article:modified_time" content="2024-03-13T00:42:09.513Z">
<meta property="article:author" content="lovewhoilove">
<meta property="article:tag" content="GIS,前端,Windows">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://lovewhoilove.gitee.io/img/avatar.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://lovewhoilove.gitee.io/examples/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="manifest" href="/img/pwa/manifest.json"/><meta name="msapplication-TileColor" content="#49b1f5"/><link rel="apple-touch-icon" sizes="180x180" href="/img/pwa/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/img/pwa/32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/img/pwa/16.png"/><link rel="mask-icon" href="/img/pwa/32.png" color="#5bbad5"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: lovewhoilove","link":"链接: ","source":"来源: lovewhoilove 的小站","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: true,
  isAnchor: false,
  percent: {
    toc: false,
    rightside: true,
  }
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '示例',
  isPost: false,
  isHome: false,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2024-03-13 08:42:09'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/progress_bar.css"><link rel="stylesheet" href="/css/custom.css"><svg aria-hidden="true" style="position:absolute; overflow:hidden; width:0; height:0"><symbol id="icon-sun" viewBox="0 0 1024 1024"><path d="M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z" fill="#FFD878" p-id="8420"></path><path d="M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z" fill="#FFE4A9" p-id="8421"></path><path d="M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z" fill="#4D5152" p-id="8422"></path><path d="M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z" fill="#4D5152" p-id="8423"></path></symbol><symbol id="icon-moon" viewBox="0 0 1024 1024"><path d="M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z" fill="#FFB531" p-id="11345"></path><path d="M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z" fill="#030835" p-id="11346"></path></symbol></svg><!-- hexo injector head_end start --><link rel="stylesheet" href="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/animate.min.css" media="print" onload="this.media='screen'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.4.2"></head><body><div id="loading-box" onclick="document.getElementById(&quot;loading-box&quot;).classList.add(&quot;loaded&quot;)"><div class="loading-bg"><div class="loading-img"></div><div class="loading-image-dot"></div></div></div><script>const preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',()=> { preloader.endLoading() })

if (true) {
  document.addEventListener('pjax:send', () => { preloader.initLoading() })
  document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}</script><link rel="stylesheet" href="/css/custom.css"/><script src="https://cdn.jsdelivr.net/npm/pace-js/pace.min.js"></script><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "/img/friend_404.gif" data-lazy-src="/img/avatar.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">250</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">327</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">2</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-newspaper"></i><span> 文章相关</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-timeline"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-layer-group"></i><span> Openlayers</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/doc/"><i class="fa-fw fas fa-book-reader"></i><span> 说明文档</span></a></li><li><a class="site-page child" href="/quick-start/"><i class="fa-fw fas fa-bolt"></i><span> 快速入门</span></a></li><li><a class="site-page child" href="/tutorials/"><i class="fa-fw fas fa-book"></i><span> 教程</span></a></li><li><a class="site-page child" href="/faq/"><i class="fa-fw fas fa-question"></i><span> 常见问题</span></a></li><li><a class="site-page child" href="/workshop/"><i class="fa-fw fas fa-graduation-cap"></i><span> 研讨会</span></a></li><li><a class="site-page child" href="/examples/"><i class="fa-fw fas fa-laptop-code"></i><span> 示例</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 网址导航</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="not-home-page" id="page-header" style="background-image: url('/img/homepage-banner.webp')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">lovewhoilove 的小站</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-newspaper"></i><span> 文章相关</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-timeline"></i><span> 时间轴</span></a></li><li><a class="site-page child" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li><li><a class="site-page child" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-layer-group"></i><span> Openlayers</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/doc/"><i class="fa-fw fas fa-book-reader"></i><span> 说明文档</span></a></li><li><a class="site-page child" href="/quick-start/"><i class="fa-fw fas fa-bolt"></i><span> 快速入门</span></a></li><li><a class="site-page child" href="/tutorials/"><i class="fa-fw fas fa-book"></i><span> 教程</span></a></li><li><a class="site-page child" href="/faq/"><i class="fa-fw fas fa-question"></i><span> 常见问题</span></a></li><li><a class="site-page child" href="/workshop/"><i class="fa-fw fas fa-graduation-cap"></i><span> 研讨会</span></a></li><li><a class="site-page child" href="/examples/"><i class="fa-fw fas fa-laptop-code"></i><span> 示例</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 网址导航</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="page-site-info"><h1 id="site-title">示例</h1></div></header><main class="layout hide-aside" id="content-inner"><div id="page"><div id="article-container"><details class="toggle" style="border: 1px solid black"><summary class="toggle-button" style="background-color: black;color: #fff">原文链接及内容</summary><div class="toggle-content"><p>原文链接：<a target="_blank" rel="noopener" href="https://openlayers.org/en/latest/examples/">https://openlayers.org/en/latest/examples/</a></p>
<iframe src="https://openlayers.org/en/latest/examples/" width="100%" height="400px" frameborder="0" seamless></iframe></div></details>

<a href="/posts/5e2ddb65/">
                <div title="Accessible Map" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Accessible Map</span>
                        <span class="title_trans">无障碍地图</span>
                        <span class="file">accessible.html</span>
                        <span class="content">无障碍地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9f3d90a0/">
                <div title="Advanced Mapbox Vector Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Advanced Mapbox Vector Tiles</span>
                        <span class="title_trans">高级MapBox矢量切片</span>
                        <span class="file">mapbox-vector-tiles.html</span>
                        <span class="content">一幅使用自定义切片网格的Mapbox矢量切片地图的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/5b6fd1e/">
                <div title="Advanced View Positioning" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Advanced View Positioning</span>
                        <span class="title_trans">高级视图定位</span>
                        <span class="file">center.html</span>
                        <span class="content">这个例子演示了如何调整地图的视图，以便将几何图形或坐标放在指定的像素位置。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b072b363/">
                <div title="Animated GIF" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Animated GIF</span>
                        <span class="title_trans">GIF图标动画</span>
                        <span class="file">animated-gif.html</span>
                        <span class="content">使用GIF动画作为图标的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/13e20dc0/">
                <div title="ArcGIS REST Feature Service" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">ArcGIS REST Feature Service</span>
                        <span class="title_trans">ArcGIS REST要素服务</span>
                        <span class="file">vector-esri.html</span>
                        <span class="content">将ArcGIS REST要素服务与切片策略结合使用的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/bb6064c/">
                <div title="Attributions" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Attributions</span>
                        <span class="title_trans">地图属性控件</span>
                        <span class="file">attributions.html</span>
                        <span class="content">一个在改变地图视图大小时，属性控件的可见性发生变化的例子，甚至在视图较小时属性控件会折叠起来。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f96a6df5/">
                <div title="Band Contrast Stretch" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Band Contrast Stretch</span>
                        <span class="title_trans">波段对比度拉伸</span>
                        <span class="file">cog-stretch.html</span>
                        <span class="content">选择波段并应用对比度拉伸。</span>
                    </div>
                </div>
            </a>
<a href="/posts/45d84878/">
                <div title="Bing Maps" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Bing Maps</span>
                        <span class="title_trans">必应地图图层的添加</span>
                        <span class="file">bing-maps.html</span>
                        <span class="content">一个引入必应地图图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/fd7e4e1d/">
                <div title="Box Selection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Box Selection</span>
                        <span class="title_trans">框选</span>
                        <span class="file">box-selection.html</span>
                        <span class="content">使用DragBox交互组件选择要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c334a976/">
                <div title="Canvas Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Canvas Tiles</span>
                        <span class="title_trans">Canvas渲染切片</span>
                        <span class="file">canvas-tiles.html</span>
                        <span class="content">渲染带有坐标的切片以便进行调试。</span>
                    </div>
                </div>
            </a>
<a href="/posts/54172b63/">
                <div title="CartoDB source example" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">CartoDB source example</span>
                        <span class="title_trans">CartoDB数据源的例子</span>
                        <span class="file">cartodb.html</span>
                        <span class="content">一个在地图渲染CartoDB数据的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/52b09aac/">
                <div title="Change Tile Layer Style" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Change Tile Layer Style</span>
                        <span class="title_trans">更改切片图层的样式</span>
                        <span class="file">cog-style.html</span>
                        <span class="content">更新WebGL切片图层的样式。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a25344c4/">
                <div title="Cloud Optimized GeoTIFF (COG)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Cloud Optimized GeoTIFF (COG)</span>
                        <span class="title_trans">渲染COG数据</span>
                        <span class="file">cog.html</span>
                        <span class="content">将COG数据渲染为一个切片图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/15de1fcb/">
                <div title="Cloud Optimized GeoTIFF (COG) from a Blob" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Cloud Optimized GeoTIFF (COG) from a Blob</span>
                        <span class="title_trans">渲染来自一个Blob对象的COG数据</span>
                        <span class="file">cog-blob.html</span>
                        <span class="content">将一个来自Blob对象的COG数据渲染为一个切片图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c7af7489/">
                <div title="Clustered Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Clustered Features</span>
                        <span class="title_trans">要素聚类</span>
                        <span class="file">cluster.html</span>
                        <span class="content">使用“ol/source/Cluster”的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a7e6426b/">
                <div title="COG with Projection Lookup" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">COG with Projection Lookup</span>
                        <span class="title_trans">渲染不同投影的COG影像数据</span>
                        <span class="file">cog-projection.html</span>
                        <span class="content">在不同投影的另一个图层上渲染COG影像。</span>
                    </div>
                </div>
            </a>
<a href="/posts/de3d8f52/">
                <div title="Color Manipulation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Color Manipulation</span>
                        <span class="title_trans">颜色处理</span>
                        <span class="file">color-manipulation.html</span>
                        <span class="content">演示如何对栅格数据源进行颜色处理。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7c46eaf4/">
                <div title="Constrained Extent" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Constrained Extent</span>
                        <span class="title_trans">受约束的视图范围</span>
                        <span class="file">extent-constrained.html</span>
                        <span class="content">一个有约束范围的地图视图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4cfc8f0b/">
                <div title="Constrained Zoom" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Constrained Zoom</span>
                        <span class="title_trans">受约束的缩放</span>
                        <span class="file">zoom-constrained.html</span>
                        <span class="content">一个缩放被约束的地图视图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1d7c88d5/">
                <div title="Custom Animation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Animation</span>
                        <span class="title_trans">自定义动画</span>
                        <span class="file">feature-animation.html</span>
                        <span class="content">演示如何为要素设置动画。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b6f8226d/">
                <div title="Custom Canvas Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Canvas Tiles</span>
                        <span class="title_trans">自定义Canvas切片</span>
                        <span class="file">canvas-tiles-tms.html</span>
                        <span class="content">渲染带有TMS坐标的切片以进行调试。</span>
                    </div>
                </div>
            </a>
<a href="/posts/519e8c1e/">
                <div title="Custom Circle Render" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Circle Render</span>
                        <span class="title_trans">自定义圆形要素渲染</span>
                        <span class="file">custom-circle-render.html</span>
                        <span class="content">一个自定义圆形要素渲染的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/58e0b664/">
                <div title="Custom Controls" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Controls</span>
                        <span class="title_trans">自定义控件</span>
                        <span class="file">custom-controls.html</span>
                        <span class="content">演示如何创建自定义控件。</span>
                    </div>
                </div>
            </a>
<a href="/posts/5076bea8/">
                <div title="Custom Drag-and-Drop(KMZ)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Drag-and-Drop(KMZ)</span>
                        <span class="title_trans">自定义拖放交互组件</span>
                        <span class="file">drag-and-drop-custom-kmz.html</span>
                        <span class="content">使用带有自定义格式的拖放交互组件处理KMZ文件的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/27927988/">
                <div title="Custom Drag-and-Drop (MVT preview)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Drag-and-Drop (MVT preview)</span>
                        <span class="title_trans">自定义拖放交互组件(MVT切片预览)</span>
                        <span class="file">drag-and-drop-custom-mvt.html</span>
                        <span class="content">使用带有自定义格式的拖放交互组件预览MVT切片的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/66c324d/">
                <div title="Custom Hit Detection Render" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Hit Detection Render</span>
                        <span class="title_trans">自定义命中检测渲染器</span>
                        <span class="file">custom-hit-detection-renderer.html</span>
                        <span class="content">自定义命中检测渲染器的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/76247357/">
                <div title="Custom Interactions" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Interactions</span>
                        <span class="title_trans">自定义交互</span>
                        <span class="file">custom-interactions.html</span>
                        <span class="content">一个自定义交互的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/aad58005/">
                <div title="Custom map element" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom map element</span>
                        <span class="title_trans">自定义地图元素</span>
                        <span class="file">es2015-custom-element.html</span>
                        <span class="content">一个自定义地图元素的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4f2fea23/">
                <div title="Custom Overview Map" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Overview Map</span>
                        <span class="title_trans">自定义鹰眼</span>
                        <span class="file">overviewmap-custom.html</span>
                        <span class="content">一个高级自定义的鹰眼控件示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/98e8717f/">
                <div title="Custom Polygon Styles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Polygon Styles</span>
                        <span class="title_trans">自定义多边形样式</span>
                        <span class="file">polygon-styles.html</span>
                        <span class="content">使用自定义样式的几何图形显示多边形的顶点。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1bb3c65c/">
                <div title="Custom Tiled WMS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Tiled WMS</span>
                        <span class="title_trans">自定义Tiled WMS</span>
                        <span class="file">polygon-styles.html</span>
                        <span class="content">使用自定义坐标转换函数的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b6edda5/">
                <div title="Custom Tooltips" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Custom Tooltips</span>
                        <span class="title_trans">自定义工具提示</span>
                        <span class="file">button-title.html</span>
                        <span class="content">这个例子展示了如何使用Bootstrap自定义按钮工具提示。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b45b445b/">
                <div title="d3 Integration" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">d3 Integration</span>
                        <span class="title_trans">d3可视化库的集成</span>
                        <span class="file">d3.html</span>
                        <span class="content">在使用OpenLayers集成并使用d3库的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f382d7a9/">
                <div title="Data Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Data Tiles</span>
                        <span class="title_trans">RGBA切片数据的生成</span>
                        <span class="file">data-tiles.html</span>
                        <span class="content">从头开始生成RGBA切片数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f99d1319/">
                <div title="Declutter Group" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Declutter Group</span>
                        <span class="title_trans">分组整理</span>
                        <span class="file">declutter-group.html</span>
                        <span class="content">按组整理矢量图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b22e70af/">
                <div title="Device Orientation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Device Orientation</span>
                        <span class="title_trans">设备方向</span>
                        <span class="file">device-orientation.html</span>
                        <span class="content">监听DeviceOrientation事件。</span>
                    </div>
                </div>
            </a>
<a href="/posts/72aff1bd/">
                <div title="Double click，Drag and Zoom" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Double click，Drag and Zoom</span>
                        <span class="title_trans">双击、拖动和缩放</span>
                        <span class="file">drag-and-drop.html</span>
                        <span class="content">通过双击或拖动来缩放地图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6dcf57d0/">
                <div title="Drag-and-Drop" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Drag-and-Drop</span>
                        <span class="title_trans">拖放交互</span>
                        <span class="file">drag-and-drop.html</span>
                        <span class="content">使用拖放交互的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e420afe5/">
                <div title="Drag-and-Drop Image Vector" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Drag-and-Drop Image Vector</span>
                        <span class="title_trans">结合VectorIamge图层使用拖放交互</span>
                        <span class="file">drag-and-drop-image-vector.html</span>
                        <span class="content">一个结合VectorIamge图层使用拖放交互的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/13013ca1/">
                <div title="Drag，Rotate and Zoom" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Drag，Rotate and Zoom</span>
                        <span class="title_trans">拖动旋转及缩放交互</span>
                        <span class="file">drag-rotate-and-zoom.html</span>
                        <span class="content">添加DragRotateAndZoom控件。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2686c630/">
                <div title="Draw and Modify Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Draw and Modify Features</span>
                        <span class="title_trans">绘制并修改要素</span>
                        <span class="file">draw-and-modify-features.html</span>
                        <span class="content">使用“ol/interaction/Draw”绘制和“ol/interaction/Modify”修改交互的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8fdf4d64/">
                <div title="Draw and Modify Geodesic Circles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Draw and Modify Geodesic Circles</span>
                        <span class="title_trans">绘制和修改测地线圆</span>
                        <span class="file">draw-and-modify-geodesic.html</span>
                        <span class="content">对测地线(大地线)圆使用绘制和修改交互组件的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f0931175/">
                <div title="Draw Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Draw Features</span>
                        <span class="title_trans">绘制要素</span>
                        <span class="file">draw-features.html</span>
                        <span class="content">使用“ol/interaction/Draw”绘制交互的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9ca67697/">
                <div title="Draw lines rendered with WebGL" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Draw lines rendered with WebGL</span>
                        <span class="title_trans">绘制使用WebGL渲染的线条</span>
                        <span class="file">webgl-draw-line.html</span>
                        <span class="content">此示例展示了可以动态调整笔画样式选项以查看它们如何影响线条的渲染。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e581d32/">
                <div title="Draw Shapes" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Draw Shapes</span>
                        <span class="title_trans">绘制几何形状</span>
                        <span class="file">draw-shapes.html</span>
                        <span class="content">使用“ol/interaction/Draw”绘制规则的几何形状。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6b77dba0/">
                <div title="Drawing Features Style" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Drawing Features Style</span>
                        <span class="title_trans">自定义绘制样式</span>
                        <span class="file">draw-features-style.html</span>
                        <span class="content">自定义绘制点线面和圆时的样式。</span>
                    </div>
                </div>
            </a>
<a href="/posts/993364a5/">
                <div title="Dynamic clusters" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Dynamic clusters</span>
                        <span class="title_trans">动态聚类</span>
                        <span class="file">clusters-dynamic.html</span>
                        <span class="content">具有缩放到聚类、显示外壳视图和对重叠要素进行整理的聚类。</span>
                    </div>
                </div>
            </a>
<a href="/posts/fa2d3d6c/">
                <div title="Dynamic data" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Dynamic data</span>
                        <span class="title_trans">动态数据</span>
                        <span class="file">dynamic-data.html</span>
                        <span class="content">动态数据示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1fa61f46/">
                <div title="Earthquake Clusters" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Earthquake Clusters</span>
                        <span class="title_trans">地震数据聚类</span>
                        <span class="file">earthquake-clusters.html</span>
                        <span class="content">演示如何使用自定义样式几何图形来渲染聚类的数据源要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/555acced/">
                <div title="Earthquakes Heatmap" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Earthquakes Heatmap</span>
                        <span class="title_trans">地震数据热力图展示</span>
                        <span class="file">heatmap-earthquakes.html</span>
                        <span class="content">演示“HeatmapLayer”的使用。</span>
                    </div>
                </div>
            </a>
<a href="/posts/3eaca795/">
                <div title="Earthquakes in KML" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Earthquakes in KML</span>
                        <span class="title_trans">自定义样式渲染地震数据</span>
                        <span class="file">kml-earthquakes.html</span>
                        <span class="content">演示如何使用自定义样式来渲染地震位置。</span>
                    </div>
                </div>
            </a>
<a href="/posts/af361c63/">
                <div title="Earthquakes with custom symbols" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Earthquakes with custom symbols</span>
                        <span class="title_trans">自定义符号渲染地震数据</span>
                        <span class="file">earthquake-custom-symbol.html</span>
                        <span class="content">演示了如何使用“toConext”创建自定义图标符号。</span>
                    </div>
                </div>
            </a>
<a href="/posts/26012392/">
                <div title="Editable ArcGIS REST Feature Service" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Editable ArcGIS REST Feature Service</span>
                        <span class="title_trans">可编辑的ArcGIS REST要素服务</span>
                        <span class="file">vector-esri-edit.html</span>
                        <span class="content">一个在编辑应用程序中使用ArcGIS REST要素服务的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/26216829/">
                <div title="EPSG:4326" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">EPSG:4326</span>
                        <span class="title_trans">4326投影</span>
                        <span class="file">epsg-4326.html</span>
                        <span class="content">4326投影下的地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d17a10d8/">
                <div title="Export PDF example" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Export PDF example</span>
                        <span class="title_trans">导出地图为PDF</span>
                        <span class="file">export-pdf.html</span>
                        <span class="content">将地图导出为PDF的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4189b91b/">
                <div title="Extent Interaction" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Extent Interaction</span>
                        <span class="title_trans">范围交互组件</span>
                        <span class="file">extent-interaction.html</span>
                        <span class="content">使用范围交互组件绘制范围。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9e6b3f6e/">
                <div title="External map" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">External map</span>
                        <span class="title_trans">外部地图</span>
                        <span class="file">external-map.html</span>
                        <span class="content">将地图移动到单独的窗口。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6151c95a/">
                <div title="Filtering features with WebGL" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Filtering features with WebGL</span>
                        <span class="title_trans">WebGL过滤要素</span>
                        <span class="file">filter-points-webgl.html</span>
                        <span class="content">使用WebGL过滤大量要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7ed809e3/">
                <div title="Flight Animation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Flight Animation</span>
                        <span class="title_trans">飞行动画</span>
                        <span class="file">flight-animation.html</span>
                        <span class="content">演示如何用“postrender”制作飞行动画。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c72f850/">
                <div title="Fractal Rendering" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Fractal Rendering</span>
                        <span class="title_trans">分形渲染</span>
                        <span class="file">fractal.html</span>
                        <span class="content">演示高效渲染具有许多顶点的要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d3267638/">
                <div title="Freehand Drawing" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Freehand Drawing</span>
                        <span class="title_trans">徒手绘图</span>
                        <span class="file">draw-freehand.html</span>
                        <span class="content">在徒手模式下使用“ol/interaction/Draw”交互的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a817f9f/">
                <div title="Full Screen Control" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Full Screen Control</span>
                        <span class="title_trans">全屏控件</span>
                        <span class="file">full-screen.html</span>
                        <span class="content">添加一个全屏控件。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f943b7a6/">
                <div title="Full Screen Control with extended source element" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Full Screen Control with extended source element</span>
                        <span class="title_trans">带有source选项定义的全屏控件</span>
                        <span class="file">full-screen-source.html</span>
                        <span class="content">添加一个带有source选项定义的全屏控件。</span>
                    </div>
                </div>
            </a>
<a href="/posts/373210eb/">
                <div title="Full Screen Drag，Rotate，and Zoom" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Full Screen Drag，Rotate，and Zoom</span>
                        <span class="title_trans">全屏下的拖动旋转及缩放</span>
                        <span class="file">full-screen-drag-rotate-and-zoom.html</span>
                        <span class="content">全屏状态下拖动、旋转和缩放控制的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b1719963/">
                <div title="Full-Screen Mobile" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Full-Screen Mobile</span>
                        <span class="title_trans">移动设备上的全屏地图</span>
                        <span class="file">mobile-full-screen.html</span>
                        <span class="content">移动设备上的全屏地图。</span>
                    </div>
                </div>
            </a>
<a href="/posts/cc025167/">
                <div title="Geographic Coordinates" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Geographic Coordinates</span>
                        <span class="title_trans">使用地理坐标</span>
                        <span class="file">geographic.html</span>
                        <span class="content">在地图视图中使用地理坐标。</span>
                    </div>
                </div>
            </a>
<a href="/posts/374e87f4/">
                <div title="Geographic Editing" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Geographic Editing</span>
                        <span class="title_trans">地理坐标编辑</span>
                        <span class="file">edit-geographic.html</span>
                        <span class="content">使用地理坐标编辑几何图形。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b6472bd6/">
                <div title="GeoJSON" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">GeoJSON</span>
                        <span class="title_trans">GeoJSON要素</span>
                        <span class="file">geojson.html</span>
                        <span class="content">GeoJSON要素示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/64fdc98c/">
                <div title="geojson-vt integration" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">geojson-vt integration</span>
                        <span class="title_trans">geojson-vt库的集成</span>
                        <span class="file">geojson-vt.html</span>
                        <span class="content">在浏览器中将GeoJSON动态切为矢量切片。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9d58af59/">
                <div title="Geolocation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Geolocation</span>
                        <span class="title_trans">地理定位</span>
                        <span class="file">geolocation.html</span>
                        <span class="content">使用地理定位来控制地图视图。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ccfbad0d/">
                <div title="Geolocation Tracking with Orientation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Geolocation Tracking with Orientation</span>
                        <span class="title_trans">带方向的地理定位跟踪</span>
                        <span class="file">geolocation-orientation.html</span>
                        <span class="content">地理定位和定向地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/45c35eab/">
                <div title="GeoTIFF Reprojection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">GeoTIFF Reprojection</span>
                        <span class="title_trans">GeoTIFF重投影</span>
                        <span class="file">geotiff-reprojection.html</span>
                        <span class="content">GeoTIFF重投影。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e9355e30/">
                <div title="GeoTIFF tile pyramid" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">GeoTIFF tile pyramid</span>
                        <span class="title_trans">GeoTIFF切片金字塔</span>
                        <span class="file">cog-pyramid.html</span>
                        <span class="content">将COG切片金字塔渲染为图层组。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d6b177bb/">
                <div title="GeoTIFF with Overviews" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">GeoTIFF with Overviews</span>
                        <span class="title_trans">带有概视图的GeoTIFF</span>
                        <span class="file">cog-overviews.html</span>
                        <span class="content">渲染一个带有外部概视图的GeoTIFF图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/33015ef3/">
                <div title="Google Maps" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Google Maps</span>
                        <span class="title_trans">谷歌地图</span>
                        <span class="file">google.html</span>
                        <span class="content">在地图中引入来自谷歌地图的切片数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2c60e2a9/">
                <div title="GPX Data" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">GPX Data</span>
                        <span class="title_trans">GPX数据</span>
                        <span class="file">gpx.html</span>
                        <span class="content">使用GPX数据源的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1cddf5ba/">
                <div title="High DPI WMTS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">High DPI WMTS</span>
                        <span class="title_trans">加载高DPI的WMTS数据源</span>
                        <span class="file">wmts-hidpi.html</span>
                        <span class="content">使用高DPI的WMTS数据源的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/feb8762f/">
                <div title="Hit Tolerance" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Hit Tolerance</span>
                        <span class="title_trans">命中容许偏差</span>
                        <span class="file">hit-tolerance.html</span>
                        <span class="content">使用hitTolerance参数的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/16d1bb91/">
                <div title="Icon and Label Scale" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon and Label Scale</span>
                        <span class="title_trans">图标和标签的缩放</span>
                        <span class="file">icon-scale.html</span>
                        <span class="content">缩放图标和标签的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/16d1bb91/">
                <div title="Icon Colors" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon Colors</span>
                        <span class="title_trans">自定义图标颜色</span>
                        <span class="file">icon-color.html</span>
                        <span class="content">为图标指定自定义颜色的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/65dd1f6f/">
                <div title="Icon modification" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon modification</span>
                        <span class="title_trans">图标修改</span>
                        <span class="file">modify-icon.html</span>
                        <span class="content">使用Modify交互组件编辑图标的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ed3ae0a2/">
                <div title="Icon Pixel Operations" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon Pixel Operations</span>
                        <span class="title_trans">图标像素操作</span>
                        <span class="file">icon-negative.html</span>
                        <span class="content">在点图标上的Canvas像素操作。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8751c174/">
                <div title="Icon Sprites with WebGL" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon Sprites with WebGL</span>
                        <span class="title_trans">使用WebGL渲染雪碧图</span>
                        <span class="file">icon-sprite-webgl.html</span>
                        <span class="content">用WebGL渲染许多图标。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d0f01e00/">
                <div title="Icon Symbolizer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon Symbolizer</span>
                        <span class="title_trans">图标符号</span>
                        <span class="file">icon.html</span>
                        <span class="content">使用一个图标来符号化一个点要素的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7d610036/">
                <div title="Icon Symbolizer width and height" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Icon Symbolizer width and height</span>
                        <span class="title_trans">图标的宽度和高度</span>
                        <span class="file">icon-width.html</span>
                        <span class="content">使用图标的宽度和高度属性的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/be720035/">
                <div title="IGC Data" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">IGC Data</span>
                        <span class="title_trans">IGC数据</span>
                        <span class="file">igc.html</span>
                        <span class="content">从IGC文件中读取的同一天多次滑翔伞飞行记录的轨迹示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/3a33fb07/">
                <div title="IGN WMTS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">IGN WMTS</span>
                        <span class="title_trans">IGN WMTS图层</span>
                        <span class="file">wmts-ign.html</span>
                        <span class="content">演示如何显示IGN(法国)WMTS图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f425ddfa/">
                <div title="IIIF Image API" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">IIIF Image API</span>
                        <span class="title_trans">IIIF图像API</span>
                        <span class="file">iiif.html</span>
                        <span class="content">关于IIIF图像API数据源的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/352de9da/">
                <div title="Image ArcGIS MapServer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Image ArcGIS MapServer</span>
                        <span class="title_trans">ArcGIS动态服务</span>
                        <span class="file">arcgis-image.html</span>
                        <span class="content">ArcGIS动态服务的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/352de9da/">
                <div title="Image Filters" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Image Filters</span>
                        <span class="title_trans">图像过滤</span>
                        <span class="file">image-filter.html</span>
                        <span class="content">对图像使用过滤。</span>
                    </div>
                </div>
            </a>
<a href="/posts/46ffbbfd/">
                <div title="Image Load Events" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Image Load Events</span>
                        <span class="title_trans">图像加载事件</span>
                        <span class="file">image-load-events.html</span>
                        <span class="content">使用图像加载事件的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4e1a3b55/">
                <div title="Image Reprojection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Image Reprojection</span>
                        <span class="title_trans">图像重投影</span>
                        <span class="file">reprojection-image.html</span>
                        <span class="content">演示在客户端单个图像数据源的重投影。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d6cbb348/">
                <div title="Immediate Rendering(Geographic)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Immediate Rendering(Geographic)</span>
                        <span class="title_trans">即时渲染(地理)</span>
                        <span class="file">immediate-geographic.html</span>
                        <span class="content">使用即时渲染API处理地理坐标中的几何图形。</span>
                    </div>
                </div>
            </a>
<a href="/posts/cea029ce/">
                <div title="Interpolation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Interpolation</span>
                        <span class="title_trans">插值</span>
                        <span class="file">interpolation.html</span>
                        <span class="content">数据插值示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/92542e9d/">
                <div title="JSTS Integration" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">JSTS Integration</span>
                        <span class="title_trans">JSTS集成</span>
                        <span class="file">jsts.html</span>
                        <span class="content">如何在OpenLayers中使用JSTS的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/24dd305/">
                <div title="KML" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">KML</span>
                        <span class="title_trans">KML数据渲染</span>
                        <span class="file">kml.html</span>
                        <span class="content">用矢量数据源渲染KML。</span>
                    </div>
                </div>
            </a>
<a href="/posts/262cb697/">
                <div title="Layer Clipping" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Clipping</span>
                        <span class="title_trans">图层裁剪</span>
                        <span class="file">layer-clipping.html</span>
                        <span class="content">图层裁剪示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1f61fffd/">
                <div title="Layer Groups" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Groups</span>
                        <span class="title_trans">图层组</span>
                        <span class="file">layer-group.html</span>
                        <span class="content">具有图层组的地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ee6758dc/">
                <div title="Layer Min/Max Resolution" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Min/Max Resolution</span>
                        <span class="title_trans">图层分辨率</span>
                        <span class="file">min-max-resolution.html</span>
                        <span class="content">根据当前视图分辨率显示/隐藏图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d6ac114a/">
                <div title="Layer Opacity" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Opacity</span>
                        <span class="title_trans">图层透明度</span>
                        <span class="file">layer-opacity.html</span>
                        <span class="content">根据用户输入调整图层的透明度。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7fa306af/">
                <div title="Layer Spy" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Spy</span>
                        <span class="title_trans">图层探查</span>
                        <span class="file">layer-spy.html</span>
                        <span class="content">在一个图层上查看另一个图层的一部分。</span>
                    </div>
                </div>
            </a>
<a href="/posts/53f41050/">
                <div title="Layer Swipe" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Swipe</span>
                        <span class="title_trans">图层卷帘操作</span>
                        <span class="file">layer-swipe.html</span>
                        <span class="content">在一个图层上查看另一个图层的一部分。</span>
                    </div>
                </div>
            </a>
<a href="/posts/18e5ce7b/">
                <div title="Layer Swipe(WebGL)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Swipe(WebGL)</span>
                        <span class="title_trans">图层卷帘操作(WebGL)</span>
                        <span class="file">webgl-layer-swipe.html</span>
                        <span class="content">裁剪WebGL切片图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ad78c0f/">
                <div title="Layer Z-Index" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Z-Index</span>
                        <span class="title_trans">图层zIndex排序</span>
                        <span class="file">layer-z-index.html</span>
                        <span class="content">使用zIndex对图层排序的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/55b28e03/">
                <div title="Layer Zoom Limits" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Layer Zoom Limits</span>
                        <span class="title_trans">图层缩放限制</span>
                        <span class="file">layer-zoom-limits.html</span>
                        <span class="content">使用minZoom和MaxZoom控制层的可见性。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9e97aea9/">
                <div title="Lazy Source" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Lazy Source</span>
                        <span class="title_trans">数据源懒加载</span>
                        <span class="file">lazy-source.html</span>
                        <span class="content">在构建图层后设置图层数据源的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/959b42b7/">
                <div title="Limited Layer Extent" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Limited Layer Extent</span>
                        <span class="title_trans">有限的图层范围</span>
                        <span class="file">layer-extent.html</span>
                        <span class="content">将层渲染限制在有限的范围内。</span>
                    </div>
                </div>
            </a>
<a href="/posts/69916431/">
                <div title="LineString Arrows" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">LineString Arrows</span>
                        <span class="title_trans">给线段添加箭头</span>
                        <span class="file">line-arrows.html</span>
                        <span class="content">为每个线段绘制箭头的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/efe6d93/">
                <div title="Loading Spinner" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Loading Spinner</span>
                        <span class="title_trans">加载动效</span>
                        <span class="file">load-events.html</span>
                        <span class="content">使用加载事件显示加载旋转器(加载动效)的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4e44cb87/">
                <div title="Localized OpenStreetMap" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Localized OpenStreetMap</span>
                        <span class="title_trans">本地化的OpenStreetMap</span>
                        <span class="file">localized-openstreetmap.html</span>
                        <span class="content">一个本地化的OpenStreetMap地图的例子，带有一个自定义切片服务器和一个自定义属性。</span>
                    </div>
                </div>
            </a>
<a href="/posts/76870d7e/">
                <div title="Magnify" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Magnify</span>
                        <span class="title_trans">放大镜</span>
                        <span class="file">magnify.html</span>
                        <span class="content">在指针下显示图像的放大版本。</span>
                    </div>
                </div>
            </a>
<a href="/posts/696b8852/">
                <div title="Map Export" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Map Export</span>
                        <span class="title_trans">地图输出</span>
                        <span class="file">export-map.html</span>
                        <span class="content">将地图导出为PNG图片的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6fe87e42/">
                <div title="Map Graticule" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Map Graticule</span>
                        <span class="title_trans">地图经纬网</span>
                        <span class="file">graticule.html</span>
                        <span class="content">这个例子展示了如何在地图上添加经纬网图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8506daab/">
                <div title="Map Link" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Map Link</span>
                        <span class="title_trans">在地图中添加Link交互</span>
                        <span class="file">link.html</span>
                        <span class="content">将地图状态与URL同步。</span>
                    </div>
                </div>
            </a>
<a href="/posts/97bf6ba3/">
                <div title="Mapbox Vector Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Mapbox Vector Layer</span>
                        <span class="title_trans">Mapbox矢量图层</span>
                        <span class="file">mapbox-vector-layer.html</span>
                        <span class="content">使用Mapbox托管样式渲染图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/953b6a51/">
                <div title="Mapbox Vector Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Mapbox Vector Tiles</span>
                        <span class="title_trans">Mapbox矢量切片</span>
                        <span class="file">mapbox-vector-tiles.html</span>
                        <span class="content">Mapbox矢量切片地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/159ea064/">
                <div title="Mapbox-gl Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Mapbox-gl Layer</span>
                        <span class="title_trans">Mapbox图层</span>
                        <span class="file">mapbox-layer.html</span>
                        <span class="content">Mapbox-gl-js图层集成示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/afc652e2/">
                <div title="MapGuide Untiled" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">MapGuide Untiled</span>
                        <span class="title_trans">未命名的MapGuide地图</span>
                        <span class="file">mapguide-untiled.html</span>
                        <span class="content">一个未命名的MapGuide地图的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c0ddc82e/">
                <div title="Marker Animation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Marker Animation</span>
                        <span class="title_trans">标记动画</span>
                        <span class="file">feature-move-animation.html</span>
                        <span class="content">演示如何沿线移动要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2b267aea/">
                <div title="Measure" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Measure</span>
                        <span class="title_trans">测量</span>
                        <span class="file">measure.html</span>
                        <span class="content">借助绘制交互测量长度和面积。</span>
                    </div>
                </div>
            </a>
<a href="/posts/85d2d66f/">
                <div title="Measure using vector styles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Measure using vector styles</span>
                        <span class="title_trans">使用自定义矢量样式测量</span>
                        <span class="file">measure.html</span>
                        <span class="content">使用自定义矢量样式测量长度和面积的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f9a9be3b/">
                <div title="Modify Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Modify Features</span>
                        <span class="title_trans">修改要素</span>
                        <span class="file">modify-features.html</span>
                        <span class="content">使用Modify交互组件编辑要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ed9a84/">
                <div title="Modify Features Test" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Modify Features Test</span>
                        <span class="title_trans">修改要素测试</span>
                        <span class="file">modify-test.html</span>
                        <span class="content">测试要素修改的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/628d4d9c/">
                <div title="Mouse Position" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Mouse Position</span>
                        <span class="title_trans">鼠标位置</span>
                        <span class="file">mouse-position.html</span>
                        <span class="content">位于地图外部的鼠标位置控件的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/15066f4c/">
                <div title="Moveend Event" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Moveend Event</span>
                        <span class="title_trans">地图MoveEnd事件</span>
                        <span class="file">moveend.html</span>
                        <span class="content">地图的MoveEnd事件的使用。</span>
                    </div>
                </div>
            </a>
<a href="/posts/70710ea2/">
                <div title="Multiple COG sources" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Multiple COG sources</span>
                        <span class="title_trans">多个COG数据源</span>
                        <span class="file">multiple-cogs.html</span>
                        <span class="content">显示两个不同投影的Sentinel 2号cog数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7bcbff98/">
                <div title="Navigation Controls" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Navigation Controls</span>
                        <span class="title_trans">导航控件</span>
                        <span class="file">navigation-controls.html</span>
                        <span class="content">显示如何添加导航控件。</span>
                    </div>
                </div>
            </a>
<a href="/posts/14094644/">
                <div title="NDVI from a Sentinel 2 COG" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">NDVI from a Sentinel 2 COG</span>
                        <span class="title_trans">COG数据的NDVI计算</span>
                        <span class="file">cog-math.html</span>
                        <span class="content">计算NDVI并用于自定义彩色地图。</span>
                    </div>
                </div>
            </a>
<a href="/posts/efe59876/">
                <div title="NDVI with a Dynamic Color Ramp" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">NDVI with a Dynamic Color Ramp</span>
                        <span class="title_trans">使用动态颜色渐变来渲染NDVI值</span>
                        <span class="file">cog-colors.html</span>
                        <span class="content">一个使用动态颜色渐变渲染NDVI计算结果的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/585e0766/">
                <div title="NDVI+NDWI from two 16-bit COGs" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">NDVI+NDWI from two 16-bit COGs</span>
                        <span class="title_trans">COG数据的NDVI和NDWI的计算</span>
                        <span class="file">cog-math-multisource.html</span>
                        <span class="content">计算NDVI和NDWI，分别用绿色和蓝色来渲染(显示)。</span>
                    </div>
                </div>
            </a>
<a href="/posts/36c674cf/">
                <div title="OGC Map Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OGC Map Tiles</span>
                        <span class="title_trans">OGC地图切片</span>
                        <span class="file">ogc-map-tiles.html</span>
                        <span class="content">使用OGC API-Tiles服务渲染地图切片。</span>
                    </div>
                </div>
            </a>
<a href="/posts/75c17e9/">
                <div title="OGC Map Tiles(Geographic)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OGC Map Tiles(Geographic)</span>
                        <span class="title_trans">OGC地图切片(地理)</span>
                        <span class="file">ogc-map-tiles-geographic.html</span>
                        <span class="content">使用OGC API-Tiles服务渲染地图切片。</span>
                    </div>
                </div>
            </a>
<a href="/posts/db9d59d7/">
                <div title="OGC Vector Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OGC Vector Tiles</span>
                        <span class="title_trans">OGC矢量切片</span>
                        <span class="file">ogc-vector-tiles.html</span>
                        <span class="content">使用OGC API-Tiles服务渲染矢量切片。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b0659e71/">
                <div title="OGC Vector Tiles (Geographic)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OGC Vector Tiles (Geographic)</span>
                        <span class="title_trans">OGC矢量切片(地理)</span>
                        <span class="file">ogc-vector-tiles-geographic.html</span>
                        <span class="content">使用OGC API-Tiles服务渲染矢量切片。</span>
                    </div>
                </div>
            </a>
<a href="/posts/71eddc3f/">
                <div title="OpenStreetMap Reprojection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OpenStreetMap Reprojection</span>
                        <span class="title_trans">OSM重投影</span>
                        <span class="file">reprojection-wgs84.html</span>
                        <span class="content">演示在WGS84坐标系下的OpenStreetMap在客户端的重投影。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e7349b39/">
                <div title="OpenStreetMap Reprojection with ScaleLine Control" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OpenStreetMap Reprojection with ScaleLine Control</span>
                        <span class="title_trans">使用比例尺控件进行OSM重投影</span>
                        <span class="file">scaleline-indiana-east.html</span>
                        <span class="content">演示了在客户端OpenStreetMap重新投影至NAD83 Indiana East。</span>
                    </div>
                </div>
            </a>
<a href="/posts/11010288/">
                <div title="OSM Vector Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OSM Vector Tiles</span>
                        <span class="title_trans">OSM矢量切片</span>
                        <span class="file">osm-vector-tiles.html</span>
                        <span class="content">使用OpenStreetMap矢量切片。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2de245f8/">
                <div title="OSM XML" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">OSM XML</span>
                        <span class="title_trans">OSM XML数据源</span>
                        <span class="file">vector-osm.html</span>
                        <span class="content">使用OSM XML数据源的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2aa21dd1/">
                <div title="Overlay" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Overlay</span>
                        <span class="title_trans">Overlay的使用</span>
                        <span class="file">overlay.html</span>
                        <span class="content">借助Overlay来添加marker、文字标签和弹窗。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ef7c9962/">
                <div title="Overview Map Control" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Overview Map Control</span>
                        <span class="title_trans">鹰眼控件</span>
                        <span class="file">overviewmap.html</span>
                        <span class="content">鹰眼示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ef7c9962/">
                <div title="Page Scrolling" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Page Scrolling</span>
                        <span class="title_trans">页面滚动</span>
                        <span class="file">page-scroll.html</span>
                        <span class="content">一直向左/右拖动地图页面不中断。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f51c1420/">
                <div title="Panning and page scrolling" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Panning and page scrolling</span>
                        <span class="title_trans">页面平移及滚动</span>
                        <span class="file">two-finger-pan-scroll.html</span>
                        <span class="content">显示允许滚动页面的地图，除非使用两个手指或Cmd/Ctrl来平移地图。</span>
                    </div>
                </div>
            </a>
<a href="/posts/44f0ec73/">
                <div title="Permalink" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Permalink</span>
                        <span class="title_trans">创建永久链接</span>
                        <span class="file">permalink.html</span>
                        <span class="content">创建永久链接的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/74e892e4/">
                <div title="Pinch Zoom" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Pinch Zoom</span>
                        <span class="title_trans">触控缩放</span>
                        <span class="file">pinch-zoom.html</span>
                        <span class="content">将触控缩放限制为整数缩放级别。</span>
                    </div>
                </div>
            </a>
<a href="/posts/cecfcfaf/">
                <div title="PMTiles Shaded Relief" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">PMTiles Shaded Relief</span>
                        <span class="title_trans">PMTiles数据渲染</span>
                        <span class="file">pmtiles-elevation.html</span>
                        <span class="content">来自PMTiles的高程数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/5c98ce7f/">
                <div title="Populated Places" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Populated Places</span>
                        <span class="title_trans">居住地渲染</span>
                        <span class="file">populated-places.html</span>
                        <span class="content">根据居住地人口来缩放和渲染点要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/63686765/">
                <div title="Popup" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Popup</span>
                        <span class="title_trans">弹窗</span>
                        <span class="file">popup.html</span>
                        <span class="content">使用Overlay来创建弹出窗口。</span>
                    </div>
                </div>
            </a>
<a href="/posts/78dd8c53/">
                <div title="Preload Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Preload Tiles</span>
                        <span class="title_trans">切片的预加载</span>
                        <span class="file">preload.html</span>
                        <span class="content">切片数据的预加载示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a075f72c/">
                <div title="Print to scale example" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Print to scale example</span>
                        <span class="title_trans">指定比例尺打印地图</span>
                        <span class="file">print-to-scale.html</span>
                        <span class="content">以指定的比例尺打印地图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a315bbf3/">
                <div title="Projection and Scale" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Projection and Scale</span>
                        <span class="title_trans">投影与比例尺</span>
                        <span class="file">projection-and-scale.html</span>
                        <span class="content">在改变投影时保持比例尺的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9a4765e5/">
                <div title="Raster Reprojection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Raster Reprojection</span>
                        <span class="title_trans">栅格重投影</span>
                        <span class="file">reprojection.html</span>
                        <span class="content">演示不同投影之间的栅格重投影。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2c40985c/">
                <div title="Raster Source" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Raster Source</span>
                        <span class="title_trans">栅格数据源</span>
                        <span class="file">raster.html</span>
                        <span class="content">使用栅格数据源演示像素操作。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d81485dc/">
                <div title="Region Growing" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Region Growing</span>
                        <span class="title_trans">区域选择</span>
                        <span class="file">region-growing.html</span>
                        <span class="content">点击地图将该点的像素及其阈值范围内的相邻的像素都选中。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d81485dc/">
                <div title="Regular Shapes" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Regular Shapes</span>
                        <span class="title_trans">创建规则形状或符号</span>
                        <span class="file">region-growing.html</span>
                        <span class="content">一些常规形状或符号样式的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c2161865/">
                <div title="Render geometries to a canvas" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Render geometries to a canvas</span>
                        <span class="title_trans">在Canvas上渲染几何图形</span>
                        <span class="file">render-geometry.html</span>
                        <span class="content">在Canvas上渲染几何图形的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4bb78e2e/">
                <div title="Rendering 16-bit NumpyTiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Rendering 16-bit NumpyTiles</span>
                        <span class="title_trans">使用WebGL渲染多字节深度源图像</span>
                        <span class="file">numpytile.html</span>
                        <span class="content">使用WebGL渲染多字节深度源图像。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1fbf004a/">
                <div title="Reprojection with EPSG.io Search" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Reprojection with EPSG.io Search</span>
                        <span class="title_trans">使用EPSG.io搜索结果进行重投影</span>
                        <span class="file">reprojection-by-code.html</span>
                        <span class="content">演示栅格数据在OSM上到任意投影之间的重投影。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8fc8282b/">
                <div title="Reusable Source" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Reusable Source</span>
                        <span class="title_trans">可复用的数据源</span>
                        <span class="file">reusable-source.html</span>
                        <span class="content">通过更改URL来更新切片数据源。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6e2796a4/">
                <div title="Rich Text Labels" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Rich Text Labels</span>
                        <span class="title_trans">富文本标签</span>
                        <span class="file">rich-text-labels.html</span>
                        <span class="content">富文本标签。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f18eaa5b/">
                <div title="Scale and Rotate using Modify Interaction" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Scale and Rotate using Modify Interaction</span>
                        <span class="title_trans">使用修改交互缩放和旋转几何体</span>
                        <span class="file">modify-scale-and-rotate.html</span>
                        <span class="content">使用修改交互组件缩放和旋转几何体的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8d4ba120/">
                <div title="Scale Line" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Scale Line</span>
                        <span class="title_trans">比例尺</span>
                        <span class="file">scale-line.html</span>
                        <span class="content">比例尺示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f5024bcc/">
                <div title="Sea Level" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Sea Level</span>
                        <span class="title_trans">海平面渲染</span>
                        <span class="file">sea-level.html</span>
                        <span class="content">渲染不同高度的海平面。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4d8d9023/">
                <div title="Sea Level (with WebGL)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Sea Level (with WebGL)</span>
                        <span class="title_trans">海平面渲染(使用WebGL)</span>
                        <span class="file">webgl-sea-level.html</span>
                        <span class="content">渲染不同高度的海平面。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8c93d20e/">
                <div title="Select Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Select Features</span>
                        <span class="title_trans">选择要素</span>
                        <span class="file">select-features.html</span>
                        <span class="content">使用Select交互的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/39953303/">
                <div title="Select Features by Hover" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Select Features by Hover</span>
                        <span class="title_trans">悬停鼠标选择要素</span>
                        <span class="file">select-hover-features.html</span>
                        <span class="content">通过在要素上悬停鼠标选择要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/29d58128/">
                <div title="Select multiple Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Select multiple Features</span>
                        <span class="title_trans">选择多个要素</span>
                        <span class="file">select-multiple-features.html</span>
                        <span class="content">选择多个要素的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7e04961d/">
                <div title="Semi-Transparent Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Semi-Transparent Layer</span>
                        <span class="title_trans">半透明图层</span>
                        <span class="file">semi-transparent-layer.html</span>
                        <span class="content">一个加载了半透明图层的地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6da3bb59/">
                <div title="Shaded Relief" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Shaded Relief</span>
                        <span class="title_trans">晕渲地貌</span>
                        <span class="file">shaded-relief.html</span>
                        <span class="content">根据高程数据计算晕渲地貌。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e2cde37c/">
                <div title="Shaded Relief(with WebGL)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Shaded Relief(with WebGL)</span>
                        <span class="title_trans">晕渲地貌(使用WebGL)</span>
                        <span class="file">webgl-shaded-relief.html</span>
                        <span class="content">根据高程数据计算晕渲地貌。</span>
                    </div>
                </div>
            </a>
<a href="/posts/35602e91/">
                <div title="Shared Views" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Shared Views</span>
                        <span class="title_trans">共享视图属性</span>
                        <span class="file">side-by-side.html</span>
                        <span class="content">两个地图共享视图属性。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6ab2812/">
                <div title="Simple Map" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Simple Map</span>
                        <span class="title_trans">简单地图</span>
                        <span class="file">simple.html</span>
                        <span class="content">简单地图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e5f6150f/">
                <div title="Single Image WMS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Single Image WMS</span>
                        <span class="title_trans">加载单个图像WMS</span>
                        <span class="file">wms-image.html</span>
                        <span class="content">单个图像WMS图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/cb241a37/">
                <div title="Single Image WMS with Proj4js" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Single Image WMS with Proj4js</span>
                        <span class="title_trans">加载单个图像WMS(集成proj4js)</span>
                        <span class="file">wms-image-custom-proj.html</span>
                        <span class="content">在坐标变换中集成proj4js的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2e9b4b19/">
                <div title="Smoothing lines using Chaikins algorithm" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Smoothing lines using Chaikins algorithm</span>
                        <span class="title_trans">使用Chaikins算法来平滑绘制的线条</span>
                        <span class="file">chaikin.html</span>
                        <span class="content">使用Chaikins算法来平滑绘制的线条。</span>
                    </div>
                </div>
            </a>
<a href="/posts/db5aeb25/">
                <div title="Snap Interaction" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Snap Interaction</span>
                        <span class="title_trans">捕捉交互</span>
                        <span class="file">snap.html</span>
                        <span class="content">将捕捉交互组件与绘制和修改交互组件一起使用的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2582567e/">
                <div title="Sphere Mollweide" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Sphere Mollweide</span>
                        <span class="title_trans">Mollweide球体</span>
                        <span class="file">sphere-mollweide.html</span>
                        <span class="content">带有坐标格网图层的Mollweide球体地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f5e16663/">
                <div title="STAC support" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">STAC support</span>
                        <span class="title_trans">STAC支持</span>
                        <span class="file">stac-item.html</span>
                        <span class="content">使用几何图形和COG渲染STAC项目。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e85cee81/">
                <div title="Stadia Maps(Retina Tiles)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Stadia Maps(Retina Tiles)</span>
                        <span class="title_trans">Stadia地图(高清瓦片)</span>
                        <span class="file">stadia-maps.html</span>
                        <span class="content">加载Stadia地图Retina(视网膜)/HiDPI瓦片数据的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4907bb0b/">
                <div title="Stadia Maps(Stamen Tile Layer Composition)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Stadia Maps(Stamen Tile Layer Composition)</span>
                        <span class="title_trans">Stadia地图(Stamen的切片图层)</span>
                        <span class="file">stamen.html</span>
                        <span class="content">使用Stadia Maps切片数据组合多个图层的示例。</span>
                    </div>
                </div>
            </a>
<!-- <a href="/posts/402a2f6b/">
                <div title="Stamen Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Stamen Tiles</span>
                        <span class="title_trans">加载Stamen切片数据</span>
                        <span class="file">stamen.html</span>
                        <span class="content">一个加载Stamen切片数据源的例子。</span>
                    </div>
                </div>
            </a> -->
<a href="/posts/555aee34/">
                <div title="Static Image" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Static Image</span>
                        <span class="title_trans">静态图像图层</span>
                        <span class="file">static-image.html</span>
                        <span class="content">一个使用静态图像作为图层数据源的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/194009f2/">
                <div title="Street Labels" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Street Labels</span>
                        <span class="title_trans">渲染街道名称</span>
                        <span class="file">street-labels.html</span>
                        <span class="content">渲染街道名称。</span>
                    </div>
                </div>
            </a>
<a href="/posts/fca874c2/">
                <div title="Style Expressions" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Style Expressions</span>
                        <span class="title_trans">样式表达式</span>
                        <span class="file">style-expressions.html</span>
                        <span class="content">演示基于规则的样式。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9bae93c/">
                <div title="Style renderer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Style renderer</span>
                        <span class="title_trans">自定义样式渲染器</span>
                        <span class="file">style-renderer.html</span>
                        <span class="content">使用自定义渲染器来渲染样式。</span>
                    </div>
                </div>
            </a>
<a href="/posts/5dbb2a35/">
                <div title="Styling feature with CanvasGradient or CanvasPattern" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Styling feature with CanvasGradient or CanvasPattern</span>
                        <span class="title_trans">使用CanvasGradient或CanvasPattern给要素设置样式</span>
                        <span class="file">canvas-gradient-pattern.html</span>
                        <span class="content">本示例展示了一个渐变的矢量图层样式。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e61d5c27/">
                <div title="SVG Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">SVG Layer</span>
                        <span class="title_trans">SVG图层</span>
                        <span class="file">svg-layer.html</span>
                        <span class="content">带有交互的svg图层的地图示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e61d5c27/">
                <div title="Synthetic Lines" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Synthetic Lines</span>
                        <span class="title_trans">合成的线要素</span>
                        <span class="file">synthetic-lines.html</span>
                        <span class="content">合成的线要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d2a7eb96/">
                <div title="Synthetic Points" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Synthetic Points</span>
                        <span class="title_trans">合成的点要素</span>
                        <span class="file">synthetic-points.html</span>
                        <span class="content">合成的点要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4d68a94d/">
                <div title="Teleporting Maps" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Teleporting Maps</span>
                        <span class="title_trans">传送地图</span>
                        <span class="file">teleport.html</span>
                        <span class="content">将地图从一个目标移动到另一个目标的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f2141db6/">
                <div title="Tile Load Events" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tile Load Events</span>
                        <span class="title_trans">切片加载事件</span>
                        <span class="file">tile-load-events.html</span>
                        <span class="content">使用切片加载(load)事件的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/afe8de9c/">
                <div title="Tile Transitions" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tile Transitions</span>
                        <span class="title_trans">给切片数据添加过渡效果</span>
                        <span class="file">tile-transitions.html</span>
                        <span class="content">自定义配置的切片数据透明度过渡效果。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e1e4685d/">
                <div title="Tiled ArcGIS MapServer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tiled ArcGIS MapServer</span>
                        <span class="title_trans">加载ArcGIS切片地图</span>
                        <span class="file">arcgis-tiled.html</span>
                        <span class="content">一个加载ArcGIS切片数据的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/74217c5d/">
                <div title="Tiled WMS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tiled WMS</span>
                        <span class="title_trans">加载WMS服务为切片图层</span>
                        <span class="file">wms-tiled.html</span>
                        <span class="content">一个加载WMS服务为切片图层的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/23043a8e/">
                <div title="Tiled WMS Wrapping" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tiled WMS Wrapping</span>
                        <span class="title_trans">加载WMS服务为切片图层(在横跨180°子午线上是否复用)</span>
                        <span class="file">wms-tiled-wrap-180.html</span>
                        <span class="content">设置横跨180°子午线的切片图层是否复用。</span>
                    </div>
                </div>
            </a>
<a href="/posts/8bf60f4a/">
                <div title="TileJSON" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">TileJSON</span>
                        <span class="title_trans">加载TileJSON数据</span>
                        <span class="file">tilejson.html</span>
                        <span class="content">TileJSON图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9289996c/">
                <div title="Timezones in KML" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Timezones in KML</span>
                        <span class="title_trans">渲染时区数据</span>
                        <span class="file">kml-timezones.html</span>
                        <span class="content">渲染KML文件中的时区数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d1631ec0/">
                <div title="Tissot Indicatrix" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tissot Indicatrix</span>
                        <span class="title_trans">Tissot指示性椭圆</span>
                        <span class="file">tissot.html</span>
                        <span class="content">在地图上绘制Tissot指示性椭圆。</span>
                    </div>
                </div>
            </a>
<a href="/posts/38077f94/">
                <div title="Tooltip on Hover" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tooltip on Hover</span>
                        <span class="title_trans">悬停提示</span>
                        <span class="file">topojson.html</span>
                        <span class="content">通过悬停在提示框中显示要素信息的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c4b9c3c/">
                <div title="TopoJSON" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">TopoJSON</span>
                        <span class="title_trans">渲染TopoJSON数据</span>
                        <span class="file">tooltip-on-hover.html</span>
                        <span class="content">演示渲染TopoJSON数据文件中的要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/bc2ce3b1/">
                <div title="topolis integration" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">topolis integration</span>
                        <span class="title_trans">topolis库的集成</span>
                        <span class="file">topolis.html</span>
                        <span class="content">如何在OpenLayers中使用topolis库的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/400c2f3b/">
                <div title="Tracing around a polygon" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Tracing around a polygon</span>
                        <span class="title_trans">追踪一个多边形要素</span>
                        <span class="file">tracing.html</span>
                        <span class="content">使用绘制交互来追踪多边形要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c4a368c4/">
                <div title="Translate Features" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Translate Features</span>
                        <span class="title_trans">平移要素</span>
                        <span class="file">translate-features.html</span>
                        <span class="content">要素平移交互的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/6b941eb4/">
                <div title="turf.js" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">turf.js</span>
                        <span class="title_trans">使用turf.js库</span>
                        <span class="file">turf.html</span>
                        <span class="content">演示如何在OpenLayers中使用turf.js库的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/bef108aa/">
                <div title="UTFGrid" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">UTFGrid</span>
                        <span class="title_trans">读取UTFGrid数据</span>
                        <span class="file">utfgrid.html</span>
                        <span class="content">此示例说明如何从UTFGrid数据源读取数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/77298c8a/">
                <div title="Vector Clipping Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Clipping Layer</span>
                        <span class="title_trans">矢量裁剪图层</span>
                        <span class="file">layer-clipping-vector.html</span>
                        <span class="content">矢量裁剪图层示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ea0bc999/">
                <div title="Vector Image Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Image Layer</span>
                        <span class="title_trans">将矢量数据渲染为图像图层</span>
                        <span class="file">image-vector-layer.html</span>
                        <span class="content">将矢量数据渲染为图像图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4e8d4e7f/">
                <div title="Vector Label Decluttering" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Label Decluttering</span>
                        <span class="title_trans">整理矢量标签</span>
                        <span class="file">vector-label-decluttering.html</span>
                        <span class="content">整理多边形上的标签。</span>
                    </div>
                </div>
            </a>
<a href="/posts/3137f129/">
                <div title="Vector Labels" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Labels</span>
                        <span class="title_trans">矢量标签</span>
                        <span class="file">vector-labels.html</span>
                        <span class="content">带有标签的GeoJSON要素的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f1470c3b/">
                <div title="Vector Labels - Justify Text" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Labels - Justify Text</span>
                        <span class="title_trans">矢量标签-文本对齐</span>
                        <span class="file">vector-labels-justify-text.html</span>
                        <span class="content">标签中的文本对齐的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7e50a9eb/">
                <div title="Vector Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Layer</span>
                        <span class="title_trans">矢量图层</span>
                        <span class="file">vector-layer.html</span>
                        <span class="content">包含国家/地区信息的国家/地区矢量图层示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b6141c96/">
                <div title="Vector Layer Hit Detection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Layer Hit Detection</span>
                        <span class="title_trans">矢量图层的探测</span>
                        <span class="file">hitdetect-vector.html</span>
                        <span class="content">ecoregions矢量图层的探测示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e2473c84/">
                <div title="Vector Tile Info" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Tile Info</span>
                        <span class="title_trans">从矢量切片获取要素信息</span>
                        <span class="file">vector-tile-info.html</span>
                        <span class="content">从矢量切片中获取要素信息。</span>
                    </div>
                </div>
            </a>
<a href="/posts/af2d7abd/">
                <div title="Vector Tile Selection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector Tile Selection</span>
                        <span class="title_trans">从矢量切片中选择要素</span>
                        <span class="file">vector-tile-selection.html</span>
                        <span class="content">从矢量切片中选择要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f3795d50/">
                <div title="Vector tiles created from a Mapbox Style object" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector tiles created from a Mapbox Style object</span>
                        <span class="title_trans">使用Mapbox样式渲染矢量切片数据</span>
                        <span class="file">mapbox-style.html</span>
                        <span class="content">针对maptiler.com中的切片数据使用ol-mapbox-style样式渲染的示例的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/74ff02e4/">
                <div title="Vector tiles in EPSG:4326" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector tiles in EPSG:4326</span>
                        <span class="title_trans">4326投影下的矢量切片数据的加载</span>
                        <span class="file">vector-tiles-4326.html</span>
                        <span class="content">此示例显示4326投影下的的矢量切片(使用ol-mapbox-style样式)。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b3e6cc33/">
                <div title="Vector tiles rendered in an offscreen canvas" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Vector tiles rendered in an offscreen canvas</span>
                        <span class="title_trans">在后台(幕后)渲染矢量切片地图</span>
                        <span class="file">offscreen-canvas.html</span>
                        <span class="content">在web worker中渲染地图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/3bc19c1e/">
                <div title="View Animation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">View Animation</span>
                        <span class="title_trans">视图动画</span>
                        <span class="file">animation.html</span>
                        <span class="content">演示动画平移、缩放和旋转。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b38cbfc/">
                <div title="View Min-Zoom" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">View Min-Zoom</span>
                        <span class="title_trans">视图最小缩放级别</span>
                        <span class="file">min-zoom.html</span>
                        <span class="content">演示如何更改视图的最小缩放级别。</span>
                    </div>
                </div>
            </a>
<a href="/posts/517b76f/">
                <div title="View Padding" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">View Padding</span>
                        <span class="title_trans">视图内填充</span>
                        <span class="file">view-padding.html</span>
                        <span class="content">此示例演示了视图的内填充(padding)选项的用法。</span>
                    </div>
                </div>
            </a>
<a href="/posts/bf7729d9/">
                <div title="View Rotation" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">View Rotation</span>
                        <span class="title_trans">视图旋转</span>
                        <span class="file">rotation.html</span>
                        <span class="content">旋转地图的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/90976094/">
                <div title="WebGL points layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WebGL points layer</span>
                        <span class="title_trans">WebGL渲染点要素</span>
                        <span class="file">webgl-points-layer.html</span>
                        <span class="content">使用WebGL优化的图层来渲染大量的点要素。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c8f5f20f/">
                <div title="WebGL Tile Layer Styles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WebGL Tile Layer Styles</span>
                        <span class="title_trans">WebGL渲染带有样式的切片图层</span>
                        <span class="file">webgl-tile-style.html</span>
                        <span class="content">使用WebGL渲染带有样式的栅格切片数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b8e98dd0/">
                <div title="WebGL Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WebGL Tiles</span>
                        <span class="title_trans">使用WebGL渲染切片数据</span>
                        <span class="file">webgl-tiles.html</span>
                        <span class="content">使用WebGL渲染栅格数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/4e34d4d9/">
                <div title="WebGL Vector Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WebGL Vector Layer</span>
                        <span class="title_trans">使用WebGL渲染矢量图层</span>
                        <span class="file">webgl-vector-layer.html</span>
                        <span class="content">使用WebGL渲染的矢量图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a9d49702/">
                <div title="WebGL Vector Tiles Layer" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WebGL Vector Tiles Layer</span>
                        <span class="title_trans">使用WebGL渲染矢量切片图层</span>
                        <span class="file">webgl-vector-tiles.html</span>
                        <span class="content">使用WebGL渲染的矢量切片图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/fa5d6fa7/">
                <div title="WFS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WFS</span>
                        <span class="title_trans">加载WFS服务</span>
                        <span class="file">vector-wfs.html</span>
                        <span class="content">加载WFS服务并设置bboxStrategy策略属性的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/7f278bee/">
                <div title="WFS - GetFeature" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WFS - GetFeature</span>
                        <span class="title_trans">WFS-创建GetFeature请求</span>
                        <span class="file">vector-wfs-getfeature.html</span>
                        <span class="content">使用过滤(筛选)器创建WFS GetFeature请求的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d2f60293/">
                <div title="WFS with geographic coordinates" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WFS with geographic coordinates</span>
                        <span class="title_trans">使用地理坐标加载WFS服务</span>
                        <span class="file">vector-wfs-geographic.html</span>
                        <span class="content">加载WFS服务并使用切片加载策略的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/3933e46/">
                <div title="Wind Arrows" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Wind Arrows</span>
                        <span class="title_trans">使用箭头样式渲染风向</span>
                        <span class="file">wind-arrows.html</span>
                        <span class="content">使用规则形状给风向设置箭头样式的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/c111470/">
                <div title="WKB" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WKB</span>
                        <span class="title_trans">解析WKB数据</span>
                        <span class="file">wkb.html</span>
                        <span class="content">使用WKB解析器的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b9a7430a/">
                <div title="WKT" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WKT</span>
                        <span class="title_trans">解析WKT数据</span>
                        <span class="file">wkt.html</span>
                        <span class="content">使用WKT解析器的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/de7cbb33/">
                <div title="WMS 512x256 Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS 512x256 Tiles</span>
                        <span class="title_trans">自定义切片网格加载WMS服务</span>
                        <span class="file">wms-custom-tilegrid-512x256.html</span>
                        <span class="content">使用512×256自定义切片网格加载WMS服务的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/deeb9cd3/">
                <div title="WMS Capabilities Parsing" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS Capabilities Parsing</span>
                        <span class="title_trans">解析WMS服务GetCapabilities响应</span>
                        <span class="file">wms-capabilities.html</span>
                        <span class="content">解析WMS服务GetCapabilities响应的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/da137cb/">
                <div title="WMS GetFeatureInfo (Image Layer)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS GetFeatureInfo (Image Layer)</span>
                        <span class="title_trans">WMS属性查询(Image Layer)</span>
                        <span class="file">getfeatureinfo-image.html</span>
                        <span class="content">单击加载的WMS服务触发getFeatureInfo请求进行属性查询。</span>
                    </div>
                </div>
            </a>
<a href="/posts/a9cf8fd5/">
                <div title="WMS GetFeatureInfo (Layers)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS GetFeatureInfo (Layers)</span>
                        <span class="title_trans">WMS属性查询(设置layers属性)</span>
                        <span class="file">getfeatureinfo-layers.html</span>
                        <span class="content">为WMSGetFeatureInfo请求设置layers属性然后按设置的多个图层顺序读取属性信息。</span>
                    </div>
                </div>
            </a>
<a href="/posts/29125ea1/">
                <div title="WMS GetFeatureInfo (Tile Layer)" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS GetFeatureInfo (Tile Layer)</span>
                        <span class="title_trans">WMS属性查询(Tile Layer)</span>
                        <span class="file">getfeatureinfo-tile.html</span>
                        <span class="content">使用WMS切片数据源发出GetFeatureInfo请求以查询要素属性。</span>
                    </div>
                </div>
            </a>
<a href="/posts/e126fd62/">
                <div title="WMS GetLegendGraphic" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS GetLegendGraphic</span>
                        <span class="title_trans">WMS获取图例</span>
                        <span class="file">wms-getlegendgraphic.html</span>
                        <span class="content">WMS获取图例的例子。</span>
                    </div>
                </div>
            </a>
<a href="/posts/5bd201d7/">
                <div title="WMS loader with SVG format" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS loader with SVG format</span>
                        <span class="title_trans">以SVG格式加载影像数据</span>
                        <span class="file">wms-image-svg.html</span>
                        <span class="content">使用WMS loader以SVG格式使用一幅影像数据。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2f0d195a/">
                <div title="WMS Time" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS Time</span>
                        <span class="title_trans">更改WMS的时间维度</span>
                        <span class="file">wms-time.html</span>
                        <span class="content">更改WMS图层的时间维度时平滑(流畅)地重新加载新的图层。</span>
                    </div>
                </div>
            </a>
<a href="/posts/addae284/">
                <div title="WMS without Projection" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMS without Projection</span>
                        <span class="title_trans">未投影的WMS</span>
                        <span class="file">wms-no-proj.html</span>
                        <span class="content">加载投影为EPSG:21781的两个WMS层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ae7112f0/">
                <div title="WMTS" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMTS</span>
                        <span class="title_trans">加载WMTS服务</span>
                        <span class="file">wmts.html</span>
                        <span class="content">加载WMTS服务的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/ebeb499f/">
                <div title="WMTS Capabilities Parsing" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMTS Capabilities Parsing</span>
                        <span class="title_trans">解析WMTS GetCapabilities响应</span>
                        <span class="file">wmts-capabilities.html</span>
                        <span class="content">解析WMTS GetCapabilities响应的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/b0b2de4a/">
                <div title="WMTS Layer from Capabilities" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMTS Layer from Capabilities</span>
                        <span class="title_trans">从Capabilities文档(流)中创建WMTS数据源</span>
                        <span class="file">wmts-layer-from-capabilities.html</span>
                        <span class="content">从WMTS的capabilities文档(流)创建的WMTS数据源的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/1351ebb8/">
                <div title="WMTS Tile Transitions" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">WMTS Tile Transitions</span>
                        <span class="title_trans">为WMTS切片数据的加载添加过渡效果</span>
                        <span class="file">wmts-dimensions.html</span>
                        <span class="content">更改WMTS图层的尺寸时平滑(流畅)地重新加载新的图层的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/f060c502/">
                <div title="XYZ" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">XYZ</span>
                        <span class="title_trans">加载XYZ切片数据</span>
                        <span class="file">xyz.html</span>
                        <span class="content">加载XYZ切片数据示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/2c93a9d9/">
                <div title="XYZ Esri" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">XYZ Esri</span>
                        <span class="title_trans">加载Esri XYZ切片数据</span>
                        <span class="file">xyz-esri.html</span>
                        <span class="content">加载Esri XYZ切片数据示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/d1cded9c/">
                <div title="XYZ Retina Tiles" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">XYZ Retina Tiles</span>
                        <span class="title_trans">加载高DPI的XYZ切片数据</span>
                        <span class="file">xyz-retina.html</span>
                        <span class="content">加载可用于Retina显示屏高DPI（512x512px）XYZ切片数据的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/89204638/">
                <div title="Zoom Sliders" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Zoom Sliders</span>
                        <span class="title_trans">缩放滑块</span>
                        <span class="file">zoomslider.html</span>
                        <span class="content">展示多种样式的缩放滑块控件的示例。</span>
                    </div>
                </div>
            </a>
<a href="/posts/9d8d578c/">
                <div title="Zoomify" referrerPolicy="no-referrer" class="card_box" style="background-color: #f8f9fa;width: 270px; height: 160px;">
                    <div class="card_content">
                        <span class="title">Zoomify</span>
                        <span class="title_trans">加载Zoomify数据源</span>
                        <span class="file">zoomify.html</span>
                        <span class="content">加载Zoomify数据源的示例。</span>
                    </div>
                </div>
            </a></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div></main><footer id="footer" style="background-image: url('/img/homepage-banner.webp')"><div id="footer-wrap"><div class="copyright">&copy;2022 - 2024 <i style="color:red" class="fa fa-heartbeat fa-beat"></i> By lovewhoilove</div><div class="footer_custom_text">生活原本沉闷，但跑起来就有风🎈</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"></div><div id="rightside-config-show"><a class="icon-V hidden" onclick="switchNightMode()" title="浅色和深色模式转换"><svg width="25" height="25" viewBox="0 0 1024 1024"><use id="modeicon" xlink:href="#icon-moon"></use></svg></a><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button><button id="go-down" type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)"><i class="fas fa-arrow-down"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/js/search/local-search.js"></script><div class="js-pjax"><script>(() => {
  const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
  if ($mermaidWrap.length) {
    window.runMermaid = () => {
      window.loadMermaid = true
      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'

      Array.from($mermaidWrap).forEach((item, index) => {
        const mermaidSrc = item.firstElementChild
        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
        const mermaidID = 'mermaid-' + index
        const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
        mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
          mermaidSrc.insertAdjacentHTML('afterend', svgCode)
        })
      })
    }

    const loadMermaid = () => {
      window.loadMermaid ? runMermaid() : getScript('https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js').then(runMermaid)
    }

    window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
  }
})()</script><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: 's2D3RXeuiTBrJjXpdIo4bJuK-gzGzoHsz',
      appKey: 'e6j6L6lA50bj18TlkcZEMw0O',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, {"placeholder":"畅所欲言哈😁~~"}))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !true) {
  if (true) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script src="/js/sun_moon.js"></script><script src="/js/jquery.min.js"></script><script data-pjax defer src="/js/chocolate.js"></script><script defer type="text/javascript" src="/js/sweetalert2.all.js"></script><script defer src="/js/lunar.js"></script><script defer src="/js/day.js"></script><script data-pjax defer src="/js/fishes.js"></script><canvas id="universe"></canvas><script src="/js/universe.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/canvas-fluttering-ribbon.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/dist/click-heart.min.js" async="async" mobile="false"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script><script>let pjaxSelectors = ["head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]

var pjax = new Pjax({
  elements: 'a:not([target="_blank"])',
  selectors: pjaxSelectors,
  cacheBust: false,
  analytics: false,
  scrollRestoration: false
})

document.addEventListener('pjax:send', function () {

  // removeEventListener scroll 
  window.tocScrollFn && window.removeEventListener('scroll', window.tocScrollFn)
  window.scrollCollect && window.removeEventListener('scroll', scrollCollect)

  document.getElementById('rightside').style.cssText = "opacity: ''; transform: ''"
  
  if (window.aplayers) {
    for (let i = 0; i < window.aplayers.length; i++) {
      if (!window.aplayers[i].options.fixed) {
        window.aplayers[i].destroy()
      }
    }
  }

  typeof typed === 'object' && typed.destroy()

  //reset readmode
  const $bodyClassList = document.body.classList
  $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')

  typeof disqusjs === 'object' && disqusjs.destroy()
})

document.addEventListener('pjax:complete', function () {
  window.refreshFn()

  document.querySelectorAll('script[data-pjax]').forEach(item => {
    const newScript = document.createElement('script')
    const content = item.text || item.textContent || item.innerHTML || ""
    Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
    newScript.appendChild(document.createTextNode(content))
    item.parentNode.replaceChild(newScript, item)
  })

  GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

  typeof chatBtnFn === 'function' && chatBtnFn()
  typeof panguInit === 'function' && panguInit()

  // google analytics
  typeof gtag === 'function' && gtag('config', '', {'page_path': window.location.pathname});

  // baidu analytics
  typeof _hmt === 'object' && _hmt.push(['_trackPageview',window.location.pathname]);

  typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()

  // prismjs
  typeof Prism === 'object' && Prism.highlightAll()
})

document.addEventListener('pjax:error', (e) => {
  if (e.request.status === 404) {
    pjax.loadUrl('/404.html')
  }
})</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '2s');
    arr[i].setAttribute('data-wow-delay', '1s');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow.min.js"></script><script defer src="https://npm.elemecdn.com/hexo-butterfly-wowjs/lib/wow_init.js"></script><!-- hexo injector body_end end --></body></html>